预加载 WASM

渲染 Rive 实例时，你的浏览器会发出网络请求到 https://unpkg.com/@rive-app/[email protected]/rive.wasm，该请求会获取一个 Web Assembly (WASM) 文件，其中包含用于构建渲染循环的 Rive 特定 API。unkpg 是一个全球 CDN，可以快速加载 NPM 包，在此情况下包括 WASM 文件。这使得在引入 Rive 基于 JS 的运行时时包体积更小，而只有在创建 Rive 实例时才加载 WASM。

虽然 unpkg 应快速提供 WASM 并可在从此 CDN 加载的站点之间缓存，但你可能会出于以下任何原因想要自行预加载和托管 WASM 文件：

更高可靠性地提供驱动 Rive 动画的 WASM
更快的动画加载时间
控制资源何时加载到你的 Web 应用中

如果你使用的是基础 @rive-app/canvas 或 @rive-app/webgl2（或任何纯 JS 变体运行时），将 WASM 资源导入到你的应用中，以及导入 RuntimeLoader API：

import riveWASMResource from '@rive-app/canvas/rive.wasm';
import { Rive, RuntimeLoader } from '@rive-app/canvas';

RuntimeLoader.setWasmUrl(riveWASMResource);
...
const riveInstance = new Rive({
  src: 'foo.riv',
  ...
});

RuntimeLoader 是一个单例，管理在加载 Rive 实例时在幕后加载 WASM 文件。通过调用 setWasmUrl API，你可以使用从直接导入 WASM 文件获得的数据 URI 来加载 Rive 运行时的 WASM。在任何有 Rive 动画要加载的页面上运行此 API。

你可能需要在构建工具中添加配置以导入 WASM 文件并将其内联为数据 URI。请参见启发我们将其添加到文档的原始博客文章以获取一些指导。

特别鸣谢

特别感谢 Alex Barashkov 的原始博客文章启发了我们添加此技巧。

https://dev.to/alex_barashkov/optimization-techniques-for-rive-animations-in-react-apps-1a8p

特别鸣谢​

特别鸣谢